<template>
  <div class="app-container">
    <!-- vxe检索数据组件 -->
    <search-form
      ref="searchForm"
      :ProjectProdQueryOptions="ProjectProdQueryOptions"
      :formSearchData.sync="formSearchData"
      :statusOptions="statusOptions"
      @resetSearchEventEmit="resetSearchEventEmit"
      @searchEventEmit="searchEventEmit"
    >
    </search-form>

    <!-- 表格组件 -->
    <ex-base-table
      ref="exBaseTable"
      :isVxeColSeq="false"
      :isVxeToolbar="false"
      :isVxeCheckbox="false"
      :isVxeHandleS="true"
      :isDelButton="false"
      :isUpdateButton="false"
      :loading.sync="loading"
      :tableColumn="tableColumn"
      :tableData="tableData"
      @customSortMethodEmit="customSortMethodEmit"
      @handleUpdateEmit="handleUpdateEmit"
    >
      <!-- 操作栏按钮扩展插槽 -->
      <template v-slot:handleExtend="{ row }">
        &nbsp;
        <el-button
          v-if="true"
          size="mini"
          type="text"
          @click="viewSonTable(row)"
        >
          流程监控
        </el-button>
        &nbsp;
        <el-popconfirm title="确认停止？"  @confirm="stopEvent(row)" v-if="row.status == 4">
          <el-button  size="mini" type="text" slot="reference">停止</el-button>
        </el-popconfirm>
        <!-- <template v-if="row.status != '2'">
          &nbsp;
          <el-button v-if="true" size="mini" type="text" @click="viewExceptionMsg(row)">
            异常信息
          </el-button>
        </template> -->
      </template>
    </ex-base-table>

    <!-- 分页组件 -->
    <Pagination
      v-show="tablePage.totalResult > 0"
      :limit.sync="tablePage.pageSize"
      :page.sync="tablePage.currentPage"
      :total="tablePage.totalResult"
      @pagination="pageFindList"
    />

    <!-- 表单提价组件 -->
    <submit-form
      ref="submitForm"
      :ProjectProdQueryBranchOptions="ProjectProdQueryBranchOptions"
      :ProjectProdQueryOptions="ProjectProdQueryOptions"
      :dialogFormVisible.sync="dialogFormVisible"
      :dialogStatus="dialogStatus"
      :formSubmitData.sync="formSubmitData"
      @handleFromUpdateDataEmit="handleFromUpdateDataEmit"
      @resetFormDataEmit="resetFormSubmitData"
    >
    </submit-form>

    <el-dialog
      :title="DialogSonTableVisible_title"
      width="80%"
      :visible.sync="DialogSonTableVisible"
    >
      <ParamValMaintainTable
        ref="paramValMaintainTable"
        :currentRow="currentRow"
      />
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// import PageHeaderLayout from '@/layouts/PageHeaderLayout'
// import ApeDrawer from '@/components/ApeDrawer'
// import { mapGetters } from 'vuex'

import { fetchList, findStatusSystemMessage, stopflow } from "./service/baseApi";
// 基础表格组件
import ExBaseTable from "@/components/VxeTable/ExBaseTable";
// 分页
import Pagination from "@/components/Pagination";
// 文章表单
import SubmitForm from "./components/SubmitForm";
// 检索表单
import SearchForm from "./components/SearchForm";
import ParamValMaintainTable from "./components/ParamValMaintainTable";

//信息提示框

import XEUtils from "xe-utils";
import resetFormSubmitData from "@/views/mixins/resetFormSubmitData";

export default {
  name: "vxe-basetable",
  mixins: [resetFormSubmitData],
  components: {
    //PageHeaderLayout,
    ExBaseTable,
    Pagination,
    SubmitForm,
    SearchForm,
    ParamValMaintainTable,
  },
  // 定义属性
  data() {
    return {
      // 检索条件
      formSearchData: {
        task_name: "",
        status: "",
      },
      // 排除条件
      sortField: "",
      sortFlag: "",
      ProjectProdQueryOptions: [],
      ProjectProdQueryBranchOptions: [],
      // 状态选项
      statusOptions: [],

      /* 表单相关 */
      dialogFormVisible: false, // 修改删除弹出框
      dialogStatus: "",
      // 表单数据对象
      formSubmitData: {
        id: undefined,
        trst_type: "",
        data_date: "",
      },
      initFormSubmitData: {
        id: undefined,
        trst_type: "",
        data_date: "",
      },
      /* 分页相关 */
      tablePage: {
        currentPage: 1, //当前页
        pageSize: 10, // 每一页页数
        totalResult: 0,
      },
      /* 表格相关 */
      tableColumn: [], // 表格字段
      loading: false, //表格loading特效
      tableData: [], //表格数据

      DialogSonTableVisible: false,
      DialogSonTableVisible_title: "",
      currentRow: {},
    }; //datareturn-end
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    /* API数据操作相关 */
    // 查询数据
    findList() {
      this.loading = true;
      // 请求表格数据
      fetchList({
        page: this.tablePage.currentPage, // 当前页
        pageSize: this.tablePage.pageSize, // 每页条数
        //  sort:this.sortData,
        sortField: this.sortField,
        sortFlag: this.sortFlag,
        // sort:JSON.stringify(this.sortData),
        // ...this.formSearchData,  //检索条件
        s_date:
          XEUtils.isArray(this.formSearchData.data_date) &&
          this.formSearchData.data_date.length === 2
            ? this.formSearchData.data_date[0]
            : "",
        e_date:
          XEUtils.isArray(this.formSearchData.data_date) &&
          this.formSearchData.data_date.length === 2
            ? this.formSearchData.data_date[1]
            : "",
        task_name: this.formSearchData.task_name,
        status: this.formSearchData.status,
      }).then(({ data }) => {
        console.log("response:....", data);
        // 给表格数据赋值
        this.tableData = data.rows;
        // 给分页总数赋值
        this.tablePage.totalResult = data.total;
        // 关闭加载特效
        setTimeout(() => {
          this.loading = false;
        }, 0.5 * 1000);
      });
    },
    /* 分页组件相关 */
    // 分页事件（页码切换，每页页数切换）
    pageFindList() {
      this.findList();
    },
    /* 表格组件相关 */
    // 初始化表格字段
    initTableCols() {
      const tabCols = [
        //动态增加的字段 传进来的
        // { type: 'seq', width: 60, fixed: null },
        // { type: 'checkbox', width: 50, fixed: null },
        { field: "lp_name", title: "所属法人", width: 200 },
        { field: "task_name", title: "任务方案", width: 300, sortable: true },
        // {field: 'data_date', title: '运行数据日期', width: 200},
        { field: "s_time", title: "执行开始时间", width: 300, sortable: true },
        { field: "e_time", title: "执行结束时间", width: 200 },
        { field: "cs_time", title: "已耗时（分）", width: 300, sortable: true },
        { field: "name", title: "运行状态", width: 200 },
        // { field: 'remark', title: '说明', width: 300 ,sortable:true},
      ];
      this.tableColumn = tabCols;
    },
    // 行内按钮-修改数据弹窗（需要表单组件）
    handleUpdateEmit(row, type) {
      this.formSubmitData = Object.assign({}, row); // copy obj
      this.dialogStatus = type;
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs.submitForm.$refs["dataForm"].clearValidate();
      });
    },
    // 单行删除
    // handleRmoveColEmit(row) {
    //   deleteProjManage({
    //     id: row.id
    //   }).then(({data}) => {

    //     this.findList()

    //   })

    // },
    // 停止操作
    stopEvent(row) {
      stopflow().then(()=> {
        this.findList()
      })
    },

    /* 表单组件相关 */
    // 更新
    handleFromUpdateDataEmit() {
      upmarketInteresRateInFo({
        ...this.formSubmitData, //检索条件
      }).then(({ data }) => {
        this.findList();
      });
    },
    // 增加
    // handleFromCreateDataEmit() {
    //   insertProjManage({
    //     ...this.formSubmitData,  //检索条件
    //   }).then(({data}) => {

    //     this.findList()

    //   })
    // },

    /* 检索相关 */
    // 检索
    searchEventEmit() {
      this.tablePage.currentPage = 1;
      this.findList();
    },
    // 重置
    resetSearchEventEmit() {
      // 重置代码...
      this.tablePage.currentPage = 1;
      this.findList();
    },
    /* 排序 */
    customSortMethodEmit(property, order) {
      this.sortField = property;
      this.sortFlag = order;
      this.findList();
    },
    statusOptionsDataInit() {
      findStatusSystemMessage({}).then(({ data }) => {
        this.statusOptions = XEUtils.map(data.rows, (item) => {
          return {
            value: item.code,
            label: item.name,
          };
        });
      });
    },

    /* 子表格弹出 */
    viewSonTable(row) {
      this.currentRow = Object.assign({}, row); // copy obj
      this.DialogSonTableVisible_title = row.task_name;
      this.DialogSonTableVisible = true;
    },
    /* 异常信息 */
    viewExceptionMsg(row) {
      this.$alert(`${row.remark}`, "异常信息", {
        dangerouslyUseHTMLString: true,
      });
    },
  }, //method-end
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 测试功能-下拉分页表格
    // this.keyupEvent4()
    // 初始化表格字段
    this.initTableCols();
    // 初始化表格数据
    this.findList();

    this.statusOptionsDataInit();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='scss' scoped>
.my-dropdown4 {
  width: 600px;
  height: 300px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
}
</style>
